<template>
<!--  <div>-->
<!--  用户数据-->
<!--    <div>账号：{{admin.account}}</div>-->
<!--    <div>邮箱：{{admin.email}}</div>-->
<!--  </div>-->


  <div>
    <div style="margin: 20px 0">
      <el-select class="input" v-model="timeRange" placeholder="请选择" @change="load">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </div>
    <el-card>
      <div id="line" style="width: 100%; height: 400px"></div>
    </el-card>
  </div>

</template>


<script>
import Cookies from "js-cookie";
import request from "@/utils/request";
import * as echarts from "echarts";
const option = {
  title: {
    text: '租借展示'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['租借数量', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []    //从后台获取
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '租借数量',
      type: 'line',
      stack: 'Total',
      data: []    //从后台获取
    },
  ]
};


export default {
  name: 'Home',
  data() {
    return{
      admin: Cookies.get("admin") ? JSON.parse(Cookies.get("admin")) : {},
      lineBox: null,
      timeRange: 'week',
      options:[
        {label: '最近一周', value: 'week'},
        {label: '最近一个月', value: 'month'},
        {label: '最近两个月', value: 'month2'},
        {label: '最近三个月', value: 'month3'},
      ]
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      //初始化容器
      if(!this.lineBox) {
        this.lineBox = echarts.init(document.getElementById('line'));
      }
      //从后台获取数据
      request.get('/hire/lineCharts/' + this.timeRange).then(res => {
        option.xAxis.data = res.data.date;
        option.series[0].data = res.data.hire;

        this.lineBox.setOption(option);
      })
    }
  }

}
</script>
